<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/27 0027
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>添加成员</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <style>
        .inp {
            background-color: rgba(243, 239, 239, 0.6);
            border-width: 1px;
        }
    </style>
</head>
<body style="background: url('${pageContext.request.contextPath}/static/layui/images/bg2.svg') no-repeat;
        background-size: 722px 700px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>添加成员</legend>
</fieldset>
<form class="layui-form" id="addform" action="" lay-filter="addformExp">
    <div class="layui-form-item">
        <label class="layui-form-label">姓氏</label>
        <div class="layui-input-block">
            <input type="text" name="firstName" style="width: 50%" lay-verify="firstName" autocomplete="off"
                   placeholder="input the first name" class="layui-input inp">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="lastName" style="width: 50%" lay-verify="lastName" autocomplete="off"
                   placeholder="input the last name" class="layui-input inp">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-block">
            <input type="text" name="age" style="width: 50%" lay-verify="age" autocomplete="off"
                   placeholder="input the age" class="layui-input inp">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">入职时间</label>
            <div class="layui-input-inline">
                <input type="text" name="joinDateStr" id="date" lay-verify="date" placeholder="such as 2021-01-01"
                       autocomplete="off" class="layui-input inp">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="gender" value="男" title="男" checked="">
            <input type="radio" name="gender" value="女" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-block">
            <input type="text" name="address" style="width: 50%" lay-verify="address" autocomplete="off"
                   placeholder="input the address" class="layui-input inp">
        </div>
        <%--<div class="layui-input-block">
            <select name="address" lay-filter="address">
                <option value=""></option>
                <option value="四川省" <c:if test="${emp.address== '四川省'}">selected</c:if>>四川省</option>
                <option value="广东省" <c:if test="${emp.address== '广东省'}">selected</c:if>>广东省</option>
                <option value="河北省" <c:if test="${emp.address== '河北省'}">selected</c:if>>河北省</option>
                <option value="山东省" <c:if test="${emp.address== '山东省'}">selected</c:if>>山东省</option>
                <option value="黑龙江省" <c:if test="${emp.address== '黑龙江省'}">selected</c:if>>黑龙江省</option>
            </select>
        </div>--%>
    </div>


    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">薪资</label>
            <div class="layui-input-inline">
                <input type="number" name="salary" placeholder="input the salary" autocomplete="off"
                       class="layui-input inp">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">部门</label>
        <div class="layui-input-block " style="width: 40%;">
            <select name="deptId">
                <c:forEach items="${deptList}" var="dept">
                    <option value="${dept.id}">${dept.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
</form>
</body>
<script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , $ = layui.jquery
            , laydate = layui.laydate;
        //日期
        laydate.render({
            elem: '#date'
            , zIndex: 9999
        });

        //表单取值
        $('#LAY-component-form-getval').on('click', function () {
            var data = form.val('addformExp');
            alert(JSON.stringify(data));
        });
        //表单校验
        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }

                //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                if (value === 'xxx') {
                    alert('用户名不能为敏感词');
                    return true;
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            , firstName: [
                /^[\S]{6,12}$/
                , '不能为空'
            ]
        });

    });

    function myAjax($, myData, url, sucsUrl) {
        $.ajax({
            url: url,
            data: myData,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                if (data.code === 1) {
                    layer.msg(data.message, {icon: 1});
                    if (sucsUrl !== "") {
                        setTimeout(() => {
                            location.href = sucsUrl;
                        }, 500)
                    }
                } else {
                    layer.msg(data.message, {icon: 5});
                    flag = false;
                }
            }
        })
    }
</script>
</html>
